<template>
	<view @click="toReply" class="item">
		<view class="avatar">
			<image :src="getUserAvatar(item.user_id)" mode="aspectFill"></image>
		</view>
		<view class="content">
			<view class="username">
				{{getUserNickName(item.user_id)}}
				<view v-if="closeBtn" @click.stop="delComment" class="del">
					<u-icon name="close" color="#888" size="16"></u-icon>
				</view>
			</view>
			<view class="comment-content">
				{{item.comment_content}}
			</view>
			<view class="info">
				<view v-if="type=='comment'" class="reply-num">
					{{item.totalReply || ''}}回复
				</view>
				<view class="time">
					{{$u.timeFrom(item.comment_date, 'yyyy年mm月dd日 hh时MM分ss秒')}}
				</view>
				<view class="province">
					{{item.province}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	import {getUserNickName,getUserAvatar} from '@/utils/tools.js';
	export default {
		name:"comment",
		props:{
			item:{
				type:Object,
				default:()=>({})
			},
			type:{
				type:String,
				default:'comment'
			},
			closeBtn:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			getUserNickName,getUserAvatar,
			// 检查角色权限
			checkRole(){
				let uid = uniCloud.getCurrentUserInfo().uid;
				let isSelf = uid == (this.item.user_id[0] && this.item.user_id[0]._id);
				let isAdmin = this.uniIDHasRole("low-admin");
				return isSelf || isAdmin;
			},
			// 删除评论
			delComment(){
				if(!this.checkRole()) return uni.showToast({
					title:"你没有删除别人评论的权限",
					icon:"none"
				})
				uni.showModal({
					title:"提示",
					content:"是否确认删除评论",
					success: (res) => {
						if(res.confirm){
							db.collection("circle-comment").doc(this.item._id).remove().then(res=>{
								uni.showToast({
									title:"删除成功",
									icon:"none"
								})
								this.$emit("removeComment",this.item._id)
							})
						}
					}
				})
			},
			// to 回复页面
			toReply(){
				if(this.type=='reply') return;
				uni.setStorageSync("replyItem",this.item)
				uni.navigateTo({
					url:"/pages/reply/reply"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		display: flex;
		padding: 30rpx 0;
		.avatar{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.content{
			flex: 1;
			margin-left: 20rpx;
			.username{
				color: #555;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
			}
			.comment-content{
				padding: 10rpx 0;
				color: #333;
				font-size: 28rpx;
			}
			.info{
				display: flex;
				align-items: center;
				color: #888;
				font-size: 24rpx;
				.reply-num{
					border-radius: 30rpx;
					padding: 6rpx 20rpx;
					background-color: #eee;
					margin-right: 20rpx;
				}
				.time{
					margin-right: 20rpx;
				}
			}
		}
	}
</style>